<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Sweet Titles | Fading Tooltips by DustinDiaz.com</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="developer" content="Dustin Diaz" />
	<script type="text/javascript" src="js/addEvent.js"></script>
	<script type="text/javascript" src="js/sweetTitles.js"></script>
	<style type="text/css" media="screen,projection">
	<!--
	@import "css/sweetTitles.css";
	body { background:#fff;text-align:center;margin:0;padding:0; }
	#wrapper { border:1px solid #333;width:850px;margin:20px auto 0 auto;padding:20px 20px 5px 20px;text-align:left;position:relative; }
	p#tagLine { position:absolute;top:0;right:0; }
	h1 { font:20px/20px georgia,times,serif;margin:0;padding:0; }
	h2 { font:16px/20px georgia,times,serif;margin:0 0 20px 0;padding:0; }
	ul li,p { font:14px/18px georgia,times,serif; }
	p#gap { margin-top:600px; }
	acronym,abbr { border-bottom:1px dotted #333;cursor:pointer; }
		a { color:#00f; }
			a img { border:0; }
	div.a p { margin:0;padding:0; }
	-->
	</style>
</head>
<body>
	
<div id="wrapper">
	<p id='tagLine'><a href="http://www.dustindiaz.com/" title="A Best Practices Web Development Blog"><img src="http://www.dustindiaz.com/wp-content/themes/butterflies/img/standards-imagination.png" alt="" /></a></p>
	<h1>Sweet Titles</h1>
	<h2>By Dustin Diaz</h2>
	<ul>
		<li><a accesskey="y" href="http://www.yahoo.com" title="The Great Y! Corp strikes again">Go to Yahoo</a></li>
		<li><a accesskey="s" href="http://www.sitepoint.com" title="Good development site. Great for learning">Go to Sitepoint</a></li>
		<li><a accesskey="1" href="http://www.dustindiaz.com" title="Beware: May cause serious injuries to the head. Flying objects may occur">Go to Dustin's Blog</a></li>
		<li><a accesskey="2" href="http://www.dustindiaz.com/sweet-titles/" title="A place to download the latest copy just incase something went wrong.">"Sweet Titles" supporting article</a></li>
		<li>An acronym: <acronym title="Document Object Model">D.O.M.</acronym></li>
		<li>An abbreviation: <abbr title="Extensible Hypertext Markup Language">XHTML</abbr></li>
	</ul>
	<p>Lorem ipsum , consectetuer adipiscing elit. Nunc suscipit. Ut massa. Donec a erat. Pellentesque eget pede. Sed eget elit quis erat auctor placerat. Etiam hendrerit. <a href="http://www.example.com" title="In mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ultrices mattis sem. Aenean nunc tortor, commodo ut, consectetuer sit amet, semper nec, nunc.">Donec at dolor</a> gravida elit ullamcorper nonummy. Nunc porta, lectus nec ullamcorper sagittis, ante arcu elementum diam, sit amet commodo libero diam id leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed a sem sit amet ante pretium elementum. Suspendisse potenti. Ut metus. Mauris aliquet odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
	<p>Maecenas dolor nibh, lacinia <a href="#" title="Sample Title">consectetuer</a>, rhoncus ac, semper ac, ligula. Suspendisse porttitor. Praesent non mauris. Pellentesque in neque. Maecenas facilisis sapien quis dui. Sed arcu pede, ultricies nec, sollicitudin malesuada, pellentesque sit amet, neque. Vivamus risus enim, blandit eu, aliquet eu, imperdiet vel, mauris. Vivamus adipiscing odio vitae nulla. Nulla tincidunt purus et turpis. Nulla pharetra justo ut lorem. Nulla malesuada nunc sed ante. Praesent vestibulum. Nullam faucibus consequat ipsum. Pellentesque vestibulum pellentesque est. In hac habitasse platea dictumst. Aliquam at felis. Sed eu ante. Morbi mattis diam in velit volutpat vehicula. Sed porttitor, dui eget sodales ullamcorper, risus libero dapibus justo, ut sagittis eros ipsum at velit. Etiam ac ante.</p>
	<p>In mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ultrices mattis sem. Aenean nunc tortor, commodo ut, consectetuer sit amet, semper nec, nunc. Curabitur ultricies metus pulvinar pede. Quisque est nisl, mollis eleifend, rhoncus quis, volutpat et, orci. Quisque tortor neque, ultrices eget, dapibus a, consectetuer pulvinar, eros. Nulla malesuada molestie dui. Vestibulum mauris quam, lobortis rutrum, tincidunt eu, vehicula ac, quam. Sed convallis. Nulla eu sapien. Donec eu tellus quis elit tincidunt venenatis. Suspendisse nibh diam, interdum iaculis, hendrerit ac, viverra quis, arcu. Morbi ullamcorper eleifend quam. Aenean a augue. Pellentesque ultrices metus eget dui. Vestibulum metus risus, ullamcorper eu, interdum eu, vestibulum at, turpis.</p>
	<p id='gap'>Aliquam facilisis mi sed quam. Vestibulum venenatis. <a href="#" title="I once had a proin arcu in my felis">Proin arcu felis</a>, scelerisque at, euismod ut, tristique id, est. Cras varius, est eu rutrum tempus, est est porttitor sem, nec ultrices quam massa a pede. In nibh est, lacinia eget, faucibus dictum, convallis non, massa. Donec mauris pede, ornare in, hendrerit quis, eleifend quis, elit. Curabitur quis lorem at <a href="#" title="Speaking of Mauris, where is he?">mauris</a> hendrerit mattis. Curabitur ut lectus. Duis luctus cursus est. Nunc elit. Sed varius facilisis risus. Proin auctor, mi ut congue tincidunt, risus nibh dapibus dui, et euismod pede sapien ac nisl. Fusce ut tellus. Pellentesque libero lectus, pretium id, tempor vitae, molestie sit amet, dui. Etiam sit amet libero. In adipiscing pulvinar magna. Phasellus vel urna id nulla lacinia placerat. Sed vehicula mollis sem.</p>
	<p>Pellentesque turpis diam, aliquet eget, faucibus sed, dignissim sed, diam. Aenean semper leo ac mi. Fusce orci tellus, nonummy vitae, tristique ut, scelerisque quis, ante. Maecenas eget tortor. Aenean venenatis. Nulla ullamcorper interdum eros. Donec felis lacus, porta non, sagittis nec, vestibulum eu, diam. Ut pulvinar, erat vel viverra vestibulum, lacus odio suscipit dolor, <a href="#" title="At Eleifend is where its at">at eleifend</a> lorem dui quis turpis. <a href="#" title="Boo Boo. Hiss Hiss. Is this working. THis is my really long title at the bottom of the page.">Quisque vestibulum</a> elit. Nunc viverra mollis nibh.</p>
</div>
</body>
</html>